<template>
	<view v-if="showPopup" class="empire-popup">
		<uni-transition mode-class="fade" :show="showPopup">
			<view class="empire-popup__head">
				<text>全部搜索</text>
				<view class="empire-popup__dropdown" @click="handleToggleCollapse">
					<text>收起&nbsp;</text>
					<uni-transition ref="uniAni" :show="true">
						<uni-icons type="up" size="16" color="#6a6a6a"></uni-icons>
					</uni-transition>
				</view>
			</view>
			<scroll-view class="empire-popup__keywords" :scroll-y="true" :show-scrollbar="false">
				<view class="empire-popup__content">
					<button
						v-for="(text, key) in keywords"
						class="empire-tag"
						:key="key"
						type="warn"
						:plain="true"
						size="mini"
						@click="handleAddSearchText(text)"
					>
						{{ text }}
					</button>
				</view>
			</scroll-view>
		</uni-transition>
	</view>
</template>

<script setup>
import { ref, computed, shallowReactive, onMounted } from 'vue';
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	keywords: {
		type: Array,
		default: []
	}
});

const uniAni = ref();
const emits = defineEmits(['close', 'change']);
const maxHeight = ref();
const showPopup = computed(() => props.visible);
onMounted(() => {
	const { windowHeight } = uni.getWindowInfo();
	const height = windowHeight - 300;
	maxHeight.value = `${(height < 300 ? 300 : height) * 2}rpx`;
});
function handleToggleCollapse() {
	uniAni.value.step({ rotate: '180' }, { duration: 300 });
	uniAni.value.run(() => {
		emits('close', !props.visible);
	});
}
function handleAddSearchText(value) {
	emits('change', value);
}
</script>

<style lang="scss" scoped>
.empire-popup {
	position: fixed;
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 0 0 10rpx 10rpx;
}

.empire-popup__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
}
.empire-popup__dropdown {
	display: flex;
	align-items: center;
}
.empire-popup__content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-row-gap: 24rpx;
	grid-column-gap: 16rpx;
}
.empire-popup__keywords {
	width: calc(100% - 60rpx);
	height: v-bind(maxHeight);
	padding: 30rpx;
}
.empire-tag {
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 !important;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: center;
	color: #2f4f4f !important;
}
</style>
